<template>
  <div class="left-bottom" :ref="'leftBottom'"></div>
</template>

<script>
import { currentGET } from "@/api/modules/index";
export default {
  components: {},
  data() {
    return {
      barData: [],
      categoryData: [],
      lineData: [],
      rateData: []
    };
  },
  computed: {},
  created() {},

  mounted() {
    currentGET("big6").then(res => {
      this.barData = res.data.barData;
      this.categoryData = res.data.category;
      this.lineData = res.data.lineData;
      this.rateData = res.data.rateData;
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.leftBottom);
      const option = {
        xAxis: {
          type: "category",
          data: this.categoryData,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          name: '销售额',
          type: "value",
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value} 万',
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        },
        tooltip: {
          show: true,
          trigger: "axis", // 关键点1：触发方式设置为坐标轴触发
          axisPointer: {
            // 关键点2：指示器类型（可选）
            type: "shadow" // 阴影指示器（适合柱状图）
          }
        },
        legend: {
          show: true,
          textStyle: {
            color: "#fff" // 设置图例文字颜色为白色
          }
        },
        series: [
          {
            name: "line",
            data: this.lineData,
            type: "line",
            itemStyle: {
              color: "pink"
            },
            smooth: true
          },
          {
            name: "bar",
            data: this.barData,
            type: "bar",
            tooltip: {
              show: true,
              trigger: "axis", // 关键点1：触发方式设置为坐标轴触发
              axisPointer: {
                type: "shadow" // 阴影指示器（适合柱状图）
              }
            },
            stack: "stackGroup", // 设置相同的堆叠组名称
            barWidth: 10,
            itemStyle: {
              barBorderRadius: [0, 0, 5, 5],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "purple" // 渐变起始颜色为紫色
                  },
                  {
                    offset: 1,
                    color: "skyblue" // 渐变结束颜色为蓝色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: "rate",
            data: this.rateData,
            type: "bar",
            smooth: true,
            tooltip: {
              show: true,
              trigger: "axis", // 关键点1：触发方式设置为坐标轴触发
              axisPointer: {
                type: "shadow" // 阴影指示器（适合柱状图）
              }
            },
            stack: "stackGroup", // 设置堆叠组名称
            barWidth: 10,
            itemStyle: {
              color: "gray",
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style lang='scss' scoped>
.left-bottom {
  width: 700px;
  height: 300px;
}
</style>    